<template>
  <div id="userView">
    <div class="pageHead" v-if="isEdit == false">
      <h3 style="width: 30%;display: inline-block;">用户查看</h3>
      <div class="pull-right editBtnContent">
        <el-button type="primary" round size="medium" @click="isEdit = true"><i class="iconfont">&#xe606;</i>&nbsp;&nbsp;修改</el-button>
      </div>
    </div>
    <div class="pageMain">
      <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="userForm" :disabled="isEdit ? false : true">
        <div class="formHead">用户信息</div>
        <el-row>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.trim="userForm.userName" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model.trim="userForm.phone" placeholder="手机号码"></el-input>
            <span class="blueColor" style="font-size: 12px;">（可用于登录）</span>
          </el-form-item>
          <el-form-item label="登录密码" v-if="isEdit == true && thisPageType == 'isChangeJump'">
            <el-input v-model="userForm.pwd" type="password" placeholder="登录密码"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" v-if="isEdit == true && thisPageType == 'isAddJump'" prop="pwd">
            <el-input v-model="userForm.pwd" type="password" placeholder="登录密码"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model.trim="userForm.realName" placeholder="真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="用户编号" prop="userCode">
            <el-input v-model="userForm.userCode" placeholder="用户编号"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input v-model="userForm.position" placeholder="职位"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="所属部门" prop="departmentid">
            <el-cascader v-model="userForm.departmentid" :options="depTreeData" :props="defaultProps" :show-all-levels="false" placeholder="所属部门"></el-cascader>
          </el-form-item>
          <el-form-item label="所属角色" prop="roleid">
            <el-select v-model="userForm.roleid" placeholder="所属角色" :disabled="userForm.isAdmin">
              <el-option v-for="item in roleList" :key="item.roleid" :label="item.roleName" :value="item.roleid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门负责人" prop="isPerson">
            <el-radio-group v-model="userForm.isPerson">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="userForm.status">
              <el-radio :label="0">在职</el-radio>
              <el-radio :label="2">离职</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="userForm.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="userForm.remarks" style="width: 444px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="pageFooter" v-if="isEdit">
      <el-button size="medium" round @click="cancelSave">取 消</el-button>
      <el-button size="medium" type="primary" round :loading="isConfirmLoading" style="margin-left: 30px;" @click="saveStaffInfo">保 存</el-button>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import * as Vrules from '@/util/validate';
import { mapState } from 'vuex';
import { mixinsMethod } from '@/util/util';
export default {
  name: 'userView',
  data() {
    return {
      defaultProps: {
        // children: 'Children',
        label: 'departmentName',
        value: 'departmentid'
        // emitPath: false
      },
      userForm: {
        userName: "",
        pwd: "",
        realName: "",
        phone: "",
        userCode: "",
        departmentid: "",
        roleid: "",
        status: 0,
        gender: 0,
        remarks: "",
        isPerson: true,
        position: ''
      },
      depTreeData: [],
      roleList: [],
      isConfirmLoading: false,
      isEdit: false,
      thisPageType: '',
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: Vrules.isCheckData, trigger: 'blur' }
        ],
        phone: [
          { validator: Vrules.isPhone, trigger: 'change' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        departmentid: [
          { required: true, message: '请选择所属部门', trigger: 'change' }
        ],
        roleid: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      tagCurrent: state => state.tag.tagCurrent,
      userInfo: state => state.common.userInfo
    })
  },
  methods: {
    cancelSave() {
      // let pageType = sessionStorage.getItem('thisPageType')
      let pageType = this.thisPageType;
      if (pageType === 'isChangeJump') {
        this.getParams();
      } else if (pageType === 'isAddJump') {
        this.getParams();
        this.$router.push({ name: 'departmentalStaff' });
      }
      this.isEdit = false;
    },

    saveStaffInfo() {
      // let pageType = sessionStorage.getItem('thisPageType')
      let pageType = this.thisPageType;
      let params = this.userForm;
      if (Array.isArray(params.departmentid)) {
        params.departmentid = params.departmentid[0];
      }
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          // if (this.userForm.UserPwd) {
          //   this.userForm.UserPwd = md5(this.userForm.UserPwd).toUpperCase()
          // }
          if (params.pwd) {
            params.pwd = md5(params.pwd);
          } else {
            delete params.pwd;
          }
          if (pageType === 'isChangeJump') {
            this.isConfirmLoading = true;
            this.$api.systemManagement.UserEdit(params, 2).then(res => {
              if (res.data.status === 200) {
                this.$notify({ title: '成功', message: '修改职员信息成功', type: 'success', duration: 1500 });
                this.isEdit = false;
                this.$store.commit('DEL_TAG', this.tagCurrent);
                this.$router.replace({ name: 'departmentalStaff', query: { ischange: true } });
              }
              this.isConfirmLoading = false;
            });
          } else if (pageType === 'isAddJump') {
            this.isConfirmLoading = true;
            this.$api.systemManagement.UserEdit(params, 1).then(res => {
              if (res.data.status === 200) {
                this.$notify({ title: '成功', message: '添加职员信息成功', type: 'success', duration: 1500 });
                this.$store.commit('DEL_TAG', this.tagCurrent);
                this.$router.replace({ name: 'departmentalStaff', query: { ischange: true } });
              }
              this.isConfirmLoading = false;
            });
          }
        }
      });
    },

    getParams() {
      if (this.thisPageType == 'isChangeJump') {
        this.userForm = JSON.parse(sessionStorage.getItem('staffInfo'));
        this.userForm.pwd = '';
        // 回显部门下拉
        this.userForm.JiaoSe = Number(this.userForm.JiaoSe); // 权限列表ID为数字 职员列表ID为str 转
        // 回显部门下拉
        let depItemId = Number(this.userForm.Department);
        this.userForm.Department = [depItemId];
        // 判断 如果 JiaoSe && JiaoSeName 任意不存在则视为没角色类型
        if (this.userForm.JiaoSe === '' || this.userForm.JiaoSeName === '') {
          this.userForm.JiaoSe = '';
          this.userForm.JiaoSeName = '';
        }
        this.isEdit = false;
      } else if (this.thisPageType == 'isAddJump') {
        this.$nextTick(() => {
          this.userForm = {
            userName: "",
            pwd: "",
            realName: "",
            phone: "",
            userCode: "",
            departmentid: "",
            roleid: "",
            status: 0,
            gender: 0,
            remarks: "",
          },
          this.$refs.userForm.resetFields();
        });
        this.isEdit = true;
      }

      // if (this.$route.query.type) {
      //   this.thisPageType = this.$route.query.type
      //   sessionStorage.setItem('thisPageType', this.thisPageType)
      // } else {
      //   this.thisPageType = sessionStorage.getItem('thisPageType')
      // }
      // if (sessionStorage.getItem('thisPageType') === 'isChangeJump') {
      //   this.userForm = JSON.parse(sessionStorage.getItem('staffInfo'))
      //   this.userForm.pwd=''
      //   // 回显部门下拉
      //   this.userForm.JiaoSe = Number(this.userForm.JiaoSe) // 权限列表ID为数字 职员列表ID为str 转
      //   // 回显部门下拉
      //   let depItemId = Number(this.userForm.Department)
      //   this.userForm.Department = [ depItemId ]
      //   // 判断 如果 JiaoSe && JiaoSeName 任意不存在则视为没角色类型
      //   if (this.userForm.JiaoSe === '' || this.userForm.JiaoSeName === '') {
      //     this.userForm.JiaoSe = ''
      //     this.userForm.JiaoSeName = ''
      //   }
      // } else if (sessionStorage.getItem('thisPageType') === 'isAddJump') {
      //   this.$refs.userForm.resetFields();
      //   this.isEdit = true
      // }
    },

    getTreeData() {
      this.$api.systemManagement.GetDepartmentList().then(res => {
        let resData = res.data.data;
        this.depTreeData = resData;
        // this.depTreeData = this.delChilderIsNull(resData)
        if (this.$route.query.type == 'isAddJump') {
          if (this.$route.query.departmentid) {
            this.userForm.departmentid = this.$route.query.departmentid;
          } else {
            this.userForm.departmentid = this.depTreeData[0].departmentid;
          }
        }
      });
    },

    getRoleList() {
      this.$api.systemManagement.GetRoleList().then(res => {
        this.roleList = res.data.data;
      });
    }
  },
  created() {
    this.getRoleList();
  },
  activated() {
    this.thisPageType = this.$route.query.type;
    this.getParams();
    this.getTreeData();
  },
  mixins: [mixinsMethod],
};
</script>

<style lang='less'>
#userView {
  padding: 0;
  .pageHead {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #edecf6;
    padding: 0 25px;
    .editBtnContent {
      height: 100%;
      line-height: 60px;
    }
  }
  .pageMain {
    height: calc(100% - 80px);
    .userForm {
      padding: 5px 25px 0 25px;
      font-size: 14px;
      > .el-row {
        margin-bottom: 13px;
      }
      .el-form-item {
        float: left;
        margin-right: 40px;
        .el-form-item__label {
          color: #8b9bb9;
        }
      }
      .el-input {
        width: 150px;
      }
    }
  }
  .pageFooter {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #edecf6;
    // position: absolute;
    // bottom: 0;
    width: 100%;
    text-align: center;
  }
}
</style>
